<template>
    <el-col :span="19">
        <el-row style="position: sticky; top: 0px; z-index: 1000; background: white">
            <el-row>
                <div class="page-header">
                    <div class="shouqi">hello</div>
                    <div>
                        <el-avatar :src="url"></el-avatar>
                    </div>
                </div>
            </el-row>
            <el-row>
                <el-breadcrumb separator="/" class="bread">
                    <el-breadcrumb-item v-for="item in title" :to="item.path">{{item.meta.title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>
        </el-row>
        <el-row>
            <router-view></router-view>
        </el-row>
    </el-col>
</template>
<script>
    export default {
        data() {
            return {
                url: "/1.jpg",
            };
        },

        computed: {
            title() {
                var matchedRoutes = this.$route.matched.filter(
                    (item) => item.meta && item.meta.title
                );
                let breadcrumbs = matchedRoutes.map((item) => {
                    return {
                        path: item.path,
                        meta: item.meta,
                    };
                });
                return [{path: "/", meta: {title: "首页"}}, ...breadcrumbs];
            },
        },
    };
</script>
<style>
    .page-header {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        box-shadow: 0px 8px 8px 1px rgba(158, 155, 158, 0.27);
    }

    .bread {
        margin-top: 10px;
        padding: 20px;
    }
</style>
